<template>
  <div class="container1">
    <div class="title1">
      <ul v-for="item3 in container">
        <li class="item">
          <div class="left">
            <img :src="item3.idView" alt="">
          </div>
          <div class="right">
            <span class="s1">{{ item3.up }}</span>
            <span class="s2">{{ item3.done }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <div>
        <a class="foot-a">客服电话</a>
        <span class="foot-a">|</span>
        <a class="foot-a">配送方式</a>
        <span class="foot-a">|</span>
        <a class="foot-a">支付方式</a>
        <span class="foot-a">|</span>
        <a class="foot-a">新手入门</a>
      </div>
      <div style="position: relative">
        <div class="ewm">
        </div>
        <span class="lxw">联系我</span>
      </div>
    </div>
  </div>


</template>
<script>
export default {
  name: "foot",
  data() {
    return {
      container: [
        {id: 0, idView: require('../assets/foot/pin.png'), up: "品质保证", done: "值得拥有"},
        {id: 1, idView: require('../assets/foot/te.png'), up: "特色服务", done: "不一样的服务"},
        {id: 2, idView: require('../assets/foot/ji.png'), up: "集团文化", done: "正品权威"},
        {id: 3, idView: require('../assets/foot/fu.png'), up: "覆盖全乡", done: "安全送达"},
      ]
    }
  }
}

</script>

<style scoped>
ul, li {
  list-style-type: none;
}

.container1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  //margin-top: 50px;
  //height: 220px;
}

.title1 {
  width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #ececf0;
}

.item {
  display: flex;
}

.left {
  display: flex;
  width: 40px;
  height: 100%;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 8px;
  height: 48px;
}

.s1 {
  font-size: 16px;
  color: #2e2e30;
}

.s2 {
  font-size: 12px;
  color: #8e8e92;
}
.foot{
  margin: 0 auto;
  display: flex;

}
.foot div{
  display: flex;
  justify-content: space-evenly;
}
.foot-a{
  font-size: 14px;
  padding: 20px 10px;
  color: #8e8e92;
}
.ewm{
  margin-top: 5px;
  margin-left: 40px;
  background-image: url("../assets/ewm.png");
  width: 55px;
  background-size: cover;
}
.lxw{
  position: absolute;
  font-size: 14px;
  top:60px;
  left: 46px;
  color: #8e8e92;
}
</style>